<template>
  <view class="goods">
    <view class="goods-top">
      <p>今日疯抢</p>
      <image :src="title" mode=""></image>
    </view>
    <view class="all">
      <view class="goods-center">
        <p>{{title1}}</p>
        <p>{{title2}}</p>
        <view class="orange">
          <p>{{title3}}</p>
          <view class="green">
            <p class="slot1">
              <slot name="t1"></slot>
            </p>
            <p class="slot2">
              <slot name="t2"></slot>
            </p>
          </view>
        </view>
      </view>
      <view class="goods-bottom">
        <p>{{title4}}<span>{{title5}}</span></p>
        <view class="round">
          <button class="btn">+</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: String,
      title1: String,
      title2: String,
      title3: String,
      title4: String,
      title5: String,
    },
    name: "goods1",
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .goods {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 5px 0 0 #ededed;
    height: 130px;
    border-radius: 10px;
    margin-top: 5px;
    .goods-top {
      width: 40%;
      // border-radius:15px;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      background-color: #ffffff;
      height: 120px;
      image {
        margin-top: 10px;
        width: 100%;
        height: 140rpx;
        // margin-left: 25px;
      }

      p {
        border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;
        width: 150rpx;
        text-align: center;
        color: white;
        background: linear-gradient(to top right, #f7e2d1, #e88059);
      }
    }

    .all{
      width: 100%;
      // margin-left: 10px;
      
      .goods-center {
        width: 100%;
        margin-top: 15px;
        background-color: #ffffff;
        text-align: left;
      
        p:nth-child(1) {
          font-size: 14px;
          font-weight: bold;
        }
      
        p:nth-child(2) {
          padding-top: 2px;
          font-size: 9px;
          font-weight: bold;
          color: #a5a5a5;
      
        }
      
        .orange {
          margin-top: 10px;
          position: relative;
      
          p:nth-child(1) {
            width: 60px;
            border: 2px solid orange;
            height: 15px;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: orange;
          }
      
          .green {
            position: relative;
            position: absolute;
            top: 0;
            left: 66px;
      
            .slot1 {
              width: 20px;
              border: 2px solid #66c78c;
              font-size: 10px;
              height: 15px;
              line-height: 15px;
              background-color: #66c78c;
              color: white;
            }
      
            .slot2 {
              position: absolute;
              top: 0px;
              left: 23px;
              width: 40px;
              height: 13px;
              line-height: 13px;
              text-align: center;
              border: 2px solid #66c78c;
              color: #66c78c;
            }
          }
      
      
        }
      }
      
      .goods-bottom {
        width: 100%;
        background-color: #ffffff;
        height: 45px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        justify-content: space-between;
      
        p {
          color: #ee9354;
          font-weight: bold;
          margin-top: 10px;
      
          span {
            font-size: 13px;
            color: #cdcdcd;
          }
        }
      
        .round {
          margin-right: 10px;
      
          .btn {
            border-radius: 50%;
            margin-top: 5px;
            width: 43px;
            height: 39px;
            line-height: 39px;
            background: linear-gradient(to bottom right, #61be8a, white);
            color: white;
            font-size: 22px;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>